<!-- 信息面板-component -->
<template>
  <div
    class="mobile:hidden w-[300px] shrink-0 overflow-y-auto overflow-x-hidden px-2.5 pt-2 lg:block xl:w-[320px] 2xl:w-[360px]"
  >
    <OptionBoard
      :options="options"
      :x="position.x"
      :y="position.y"
      :isOpen="isOptionBoardOpen"
      @close="isOptionBoardOpen = false"
    />
    <div v-if="fileInfo[INFO_BOARD.ID] || fileInfo[INFO_BOARD.ID]">
      <!-- 图片 -->
      <div
        class="mb-4 block w-full"
        v-if="fileInfo[INFO_BOARD.IMG_URL] && fileType.type === 'image'"
      >
        <img
          id="printable-file"
          :src="fileInfo[INFO_BOARD.IMG_URL]"
          class="file w-full overflow-hidden rounded-lg object-cover shadow-lg file-shadow"
        />
      </div>
      <!-- 视频 -->
      <div
        class="mb-4 block w-full"
        v-else-if="fileInfo[INFO_BOARD.VIDEO_URL] && fileType.type === 'video'"
      >
        <video
          id="printable-file"
          :src="fileInfo[INFO_BOARD.VIDEO_URL]"
          class="file w-full overflow-hidden rounded-lg object-cover shadow-lg file-shadow"
          loop
          muted
          @loadeddata="
            (e) => {
              e.target.volume = 0;
              e.target.play();
            }
          "
        />
      </div>

      <!-- 文件名 -->
      <div class="flex items-start mb-6" v-if="fileInfo[INFO_BOARD.FILE_NAME]">
        <div class="mr-2">
          <i
            class="pi vue-feather text-theme-color"
            :class="`pi-${isFolder ? 'folder' : fileType.type} ${
              fileType.type === 'audio' ? 'pi-volume-up' : ''
            }`"
          />
        </div>
        <div>
          <b
            class="block w-52 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold 2xl:w-72"
          >
            {{ fileInfo[INFO_BOARD.FILE_NAME] }}
          </b>
          <small class="block text-xs font-bold text-gray-400">{{
            i18nStore.translate(isFolder ? 'folder' : fileType.extension)
          }}</small>
        </div>
      </div>

      <!-- 文件大小 -->
      <div class="mb-4" v-if="!fileInfo[INFO_BOARD.IS_FOLDER]">
        <small class="block text-xs font-bold text-theme-color">{{
          i18nStore.translate('file_size')
        }}</small>
        <b class="inline-block text-sm font-bold">
          {{ fileInfo[INFO_BOARD.FILE_SIZE] }}</b
        >
      </div>

      <!-- 创建时间 -->
      <div class="mb-4" v-if="fileInfo[INFO_BOARD.FILE_CREATED]">
        <small class="block text-xs font-bold text-theme-color">{{
          i18nStore.translate('file_created_time')
        }}</small>
        <b class="inline-block text-sm font-bold">
          {{
            i18nStore.translate('date', fileInfo[INFO_BOARD.FILE_CREATED])
          }}</b
        >
      </div>

      <!-- 所处文件夹 -->
      <div
        class="mb-4"
        v-if="
          fileInfo[INFO_BOARD.FILE_FOLDER_ID] ||
          fileInfo[INFO_BOARD.FILE_FOLDER_ID] === 0
        "
      >
        <small class="block text-xs font-bold text-theme-color">{{
          i18nStore.translate('directory')
        }}</small>
        <div class="flex cursor-pointer items-center">
          <b class="inline-block text-sm font-bold">{{ curFolder.path }}</b>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="10px"
            height="10px"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="ml-2 feather feather-edit-2"
          >
            <path
              d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"
            ></path>
          </svg>
        </div>
      </div>

      <!-- 分享 -->
      <div class="mb-4" v-if="fileInfo[INFO_BOARD.FILE_SHARE]">
        <small class="block text-xs font-bold text-theme-color">{{
          i18nStore.translate('share')
        }}</small>
        <div class="mb-2 flex cursor-pointer items-center">
          <span class="inline-block text-sm font-bold">{{
            i18nStore.translate('can_download')
          }}</span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="10px"
            height="10px"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="ml-2 feather feather-edit-2"
          >
            <path
              d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"
            ></path>
          </svg>
        </div>
        <div class="flex w-full items-center">
          <i
            @click="flagStore.setShareBoardOpen(true)"
            class="pi pi-lock hover:text-theme-color vue-feather cursor-pointer feather feather-copy text-sm"
          ></i>
          <div class="relative flex items-center w-full pl-2.5" size="small">
            <!-- 文件链接地址 -->
            <input
              id="link-input-4887379"
              type="text"
              :value="fileInfo[INFO_BOARD.FILE_SHARE_LINK]"
              readonly="readonly"
              class="focus:outline-theme-color w-full appearance-none rounded-lg border border-transparent bg-light-background py-2 pr-16 pl-3 text-sm font-bold dark:bg-2x-dark-foreground"
            />
            <div class="flex items-center">
              <div class="absolute right-9 p-1">
                <i
                  v-if="isCopySuccess"
                  class="pi pi-check hover:text-theme-color vue-feather cursor-pointer feather feather-copy text-sm"
                ></i>
                <svg
                  v-else
                  @click="copyShareLink"
                  xmlns="http://www.w3.org/2000/svg"
                  width="14px"
                  height="14px"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="hover:text-theme-color vue-feather cursor-pointer feather feather-copy"
                >
                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                  <path
                    d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
                  ></path>
                </svg>
              </div>
              <div class="absolute right-2.5 p-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="14px"
                  height="14px"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="hover:text-theme-color vue-feather cursor-pointer feather feather-more-horizontal"
                >
                  <circle cx="12" cy="12" r="1"></circle>
                  <circle cx="19" cy="12" r="1"></circle>
                  <circle cx="5" cy="12" r="1"></circle>
                </svg>
              </div>
            </div>
            <textarea
              class="pointer-events-none absolute right-full opacity-0"
            ></textarea>
            <textarea
              class="pointer-events-none absolute right-full opacity-0"
            ></textarea>
          </div>
        </div>
      </div>

      <!-- 元数据 -->
      <div class="mb-4" v-if="fileInfo[INFO_BOARD.FILE_META]">
        <small class="block text-xs font-bold text-theme-color">{{
          i18nStore.translate('meta')
        }}</small>

        <div>
          <!-- <div class="flex items-center justify-between pt-0.5 pb-2">
            <b class="font-bold text-sm">创建的内容</b>
            <b class="font-bold text-sm">12. 3月. 2024, 12:12</b>
          </div> -->

          <div
            class="flex items-center justify-between py-2"
            v-if="fileInfo[INFO_BOARD.IMG_SIZE]"
          >
            <b class="font-bold text-sm">{{
              i18nStore.translate('img_size')
            }}</b>
            <b class="font-bold text-sm">{{ fileInfo[INFO_BOARD.IMG_SIZE] }}</b>
          </div>
        </div>
      </div>
    </div>

    <div class="flex h-full items-center justify-center animate-boom-in" v-else>
      <div class="text-center">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="22px"
          height="22px"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="vue-feather mb-3 inline-block text-gray-500 feather feather-eye-off"
        >
          <path
            d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
          ></path>
          <line x1="1" y1="1" x2="23" y2="23"></line>
        </svg>
        <small class="block text-xs text-gray-500">
          {{ i18nStore.translate('empty_info_board') }}</small
        >
      </div>
    </div>

    <div class="mb-4 sm:mb-5" v-if="fileInfo.isShare">
      <label
        class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"
      >
        {{ i18nStore.translate('get_your_link') }}
      </label>
      <div class="relative flex items-center">
        <input
          id="link-input-9573277"
          :value="qrcodeUrl"
          type="text"
          readonly="readonly"
          class="focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background py-2 pr-16 pl-3 text-sm font-bold dark:bg-2x-dark-foreground focus:outline-theme-color"
        />
        <div class="flex items-center">
          <div class="absolute right-9 p-1">
            <i
              v-if="isCopySuccess"
              class="pi pi-check hover:text-theme-color vue-feather cursor-pointer feather feather-copy text-sm"
            ></i>
            <svg
              v-else
              @click="copyShareLink"
              xmlns="http://www.w3.org/2000/svg"
              width="14px"
              height="14px"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="hover:text-theme-color vue-feather cursor-pointer feather feather-copy"
            >
              <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
              <path
                d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
              ></path>
            </svg>
          </div>
          <div class="absolute right-2.5 p-1" @click="showOptions($event)">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="14px"
              height="14px"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="hover:text-theme-color vue-feather cursor-pointer feather feather-more-horizontal"
              @click="generateQrcode"
            >
              <circle cx="12" cy="12" r="1"></circle>
              <circle cx="19" cy="12" r="1"></circle>
              <circle cx="5" cy="12" r="1"></circle>
            </svg>
          </div>
        </div>
        <textarea
          class="pointer-events-none absolute right-full opacity-0"
        ></textarea>
        <textarea
          class="pointer-events-none absolute right-full opacity-0"
        ></textarea>
      </div>
    </div>
  </div>
</template>

<script setup>
import { INFO_BOARD } from './filedsConfig';
import { getFileType } from '@/utils';
import { useI18nStore, useFlagStore, useFileStore } from '@/stores';
const fileStore = useFileStore();
const createShareLink = (shareId, Small) => {
  const id = btoa(`${shareId}`);
  const isSmall = btoa(`${Small}`);
  return `https://okpan.fun/share/${id}/post/${isSmall}`;
};
const qrcodeUrl = computed(() => {
  const { shareId, isSmall } = fileStore.curFileInfo;
  return createShareLink(shareId, isSmall);
});
const i18nStore = useI18nStore();
const flagStore = useFlagStore();

const isCopySuccess = ref(false);

const props = defineProps({
  fileInfo: {
    default: () => ({})
  },
  curFolder: {
    default: () => ({})
  }
});
const options = ref([
  {
    type: 'copy',
    content: i18nStore.translate('copy_link'),
    file: fileStore.curFileInfo
  },
  {
    type: 'camera',
    content: i18nStore.translate('get_qrcode'),
    file: fileStore.curFileInfo
  },
  {
    type: 'send',
    content: i18nStore.translate('share_file_by_email'),
    file: fileStore.curFileInfo
  }
]);
const position = ref({});
const isOptionBoardOpen = ref(false);
const showOptions = (event) => {
  position.value = { x: event.clientX - 240, y: event.clientY };
  isOptionBoardOpen.value = true;
};
const optionBoardCloseHandle = () => {
  isOptionBoardOpen.value = false;
};
const fileType = computed(() =>
  getFileType('.' + props.fileInfo[INFO_BOARD.FILE_EXT])
);
const isFolder = computed(() => props.fileInfo[INFO_BOARD.IS_FOLDER]);

const copyShareLink = async () => {
  try {
    if (navigator.clipboard) {
      await navigator.clipboard.writeText(qrcodeUrl.value);
      isCopySuccess.value = true;
      setTimeout(() => {
        isCopySuccess.value = false;
      }, 1000);
    }
  } catch (error) {
    console.error(error);
  }
};
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
